<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="keywords" content="">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0, user-scalable=no" />	
		<title>林业局</title>
		<link rel="stylesheet" href="<?=base_url()?>css/bootstrap.min.css" />
		<link rel="stylesheet" href="<?=base_url()?>css/public.css" />
	</head>
	<body>
		<div class="bg">			
		</div>
		<div class="containe">
			<div class="all-bd">
			    <div class="row margin-bottom-10">
				    <div class="col-xs-3 col-xs-offset-1 lei-name lei-name-two" >
				    	<span>姓</span><span>名</span>
				    </div>
				    <div class="col-xs-7 lei-input">
				    	<input type="text" name="username" id="username"/>
				    </div>
			    </div>
			    <div class="row margin-bottom-10">
				    <div class="col-xs-3 col-xs-offset-1 lei-name lei-name-two" >
				    	<span>性</span>
				    	<span>别</span>
				    </div>
				    <div class="col-xs-7 lei-input" >
				    	<select name="sex" id="sex">   
                           <option value="男">男</option>   
                           <option value="女">女</option>             
                        </select> 
				    </div>
			    </div>
			    <div class="row  margin-bottom-10">
				    <div class="col-xs-3 col-xs-offset-1 lei-name lei-name-three" >
				    	<span>手</span><span>机</span><span>号</span>				    	
				    </div>
				    <div class="col-xs-7 lei-input" >
				    	<input type="text" name="phone" id="phone"/>
				    </div>
			    </div>
			    <div class="row margin-bottom-10">
				    <div class="col-xs-3 col-xs-offset-1 lei-name lei-name-four" >
				    	<span>工</span>
				    	<span>作</span>
				    	<span>单</span>
				    	<span>位</span>		    	
				    </div>
				    <div class="col-xs-7 lei-input" >
				    	<select name="province" id="province" class="lei-address">   
                           <option value="1">上海市</option>
                           <option value="2">南京市</option>         
                        </select> 
				    	<input type="text" class="lei-address-input" name="company" id="company"/>
				    </div>
			    </div>
			    <div class="row margin-bottom-10">
				    <div class="col-xs-3 col-xs-offset-1 lei-name lei-name-four"><span>工</span><span>作</span><span>岗</span><span>位</span></div>
				    <div class="col-xs-7 lei-input " >
				    	<select name="post" id="post">   
                           <option value="1">检验检疫</option>   
                           <option value="2">检验检疫</option>             
                        </select> 
				    </div>
			    </div>
			    <div class="row margin-bottom-10">
				    <div class="col-xs-3 col-xs-offset-1  lei-name  lei-name-four"><span>个</span><span>人</span><span>爱</span><span>好</span></div>
				    <div class="col-xs-7 lei-input" >
				    	<input type="text" name="hobby" id="hobby"/>
				    </div>
			    </div>
			    <div class="row margin-bottom-10">
				    <div class="col-xs-3 col-xs-offset-1 lei-name lei-name-four"><span>竞</span><span>赛</span><span>宣</span><span>言</span></div>
				    <div class="col-xs-7 lei-input" >
				    	<input type="text" name="declaration" id="declaration"/>
				    </div>
			    </div>

			    <div class="tj-btn row tk-btn-row">
			    	<div class="col-xs-6 text-center">
			    		<a href="#" class="photo">上传照片</a>
			    	</div>
			    	<div class="col-xs-6 text-center">
			    		<a href="#" class="tj">提交</a>
			    	</div>
			    </div>
			</div>
		</div>
		
		<div class="tk">
			<div class="tk-photo">
				<img src="" alt=""  id="uploadImg"/>
			</div>
			<div class="row tk-btn-row">
			    <div class="col-xs-6 text-center tk-btn">
			    	<a href="#" id="ok">确认</a>
			    </div>
			    <div class="col-xs-6 text-center tk-btn">
			    	<a href="#" id="ok1">取消</a>
			    </div>
			</div>
		</div>
		
		<input id='upload' type="file" style="display:none;" onchange="fileSelected(this)"/>
		<input type="text" name="headimgurl" value="" id="headimgurl" style="display:none;">

		<script type="text/javascript" src="<?=base_url()?>js/jquery-2.2.3.min.js" ></script>
        <script type="text/javascript" src="<?=base_url()?>js/bootstrap.min.js" ></script>
        <script>
        $(document).ready(function(){
        	var photoHeight = $(".tk-photo").width()*3.9;
        	$(".tk-photo").height(photoHeight);
        	
        	$(".photo").click(function(){
        		$('#upload').click();
        		$(".tk").show();
        	});
        	$("#ok").click(function(){
        		$(".tk").hide();
        		$(".photo").html("再次上传");
        	});
        	$("#ok1").click(function(){
        		$(".tk").hide();
        	});

			$(".tj").click(function(){
				var username    = $("#username").val();
				var sex         = $("#sex").val();
				var phone       = $("#phone").val();
				var province    = $("#province").val();
				var city        = $("#city").val();
				var company     = $("#company").val();
				var post        = $("#post").val();
				var hobby       = $("#hobby").val();
				var declaration = $("#declaration").val();
				var headimgurl  = $("#headimgurl").val();

				if (username.trim()==''|| username.length >20) {
					alert('用户名2~20个字符');
					return false;
				}

				reg =  /^1[3|4|5|8][0-9]\d{4,8}$/;
				if(!reg.test(phone)){
					alert('手机号码格式错误，请重新输入');
					return false;
				}

				if (company.trim()==''|| company.length >50) {
					alert('公司2~50个字符');
					return false;
				}

				if (post.trim()==''|| post.length >20) {
					alert('职位2~20个字符');
					return false;
				}

				if (hobby.trim()==''|| hobby.length >200) {
					alert('个人爱好2~200个字符');
					return false;
				}

				if (declaration.trim()==''|| declaration.length >200) {
					alert('竞赛宣言2~200个字符');
					return false;
				}

				if (headimgurl.trim()=='') {
					if (!confirm('您的照片还没上传，确认提交吗？')) {
						return false;
					}
				}

				var requestData = {
					username:username,
					sex:sex,
					phone:phone,
					province:province,
					city:city,
					company:company,
					post:post,
					hobby:hobby,
					declaration:declaration,
					headimgurl:headimgurl
				};
				$.post('<?=site_url("welcome/save_userinfo")?>',requestData,function(data){
					if(data.status==='success'){
						alert('信息提交成功')
					}else if(data.status==='exist'){
						alert('您已提交过信息，请不要重复提交。');
					}else{
						alert('信息提交失败')
					}
				},'json');	
			});

			
        });
        
        //文件上传	
        function fileSelected(userfile,o) {
	        // imgUrl = "selected";
	        uploadFile(userfile);
	    }

	    function uploadFile(userfile) {
	        console.log("userfile.files[0]",userfile.files[0])
	        userfileShowDisc=userfile;
	        var fd = new FormData();

	        fd.append("userfile",userfile.files[0]);
	        console.log("fd",fd)
	        var xhr = new XMLHttpRequest();
	        xhr.upload.addEventListener("progress", uploadProgress, false);
	        xhr.addEventListener("load", uploadComplete, false);
	        xhr.addEventListener("error", uploadFailed, false);
	        xhr.addEventListener("abort", uploadCanceled, false);
	        xhr.open("POST", "<?=site_url('upload/do_upload')?>");
	        xhr.send(fd);
	    }

	    function uploadProgress(evt) {
	        if (evt.lengthComputable) {
	            var percentComplete = Math.round(evt.loaded * 100 / evt.total);
	            console.log(percentComplete)
	            // $(".post_img_inp").html('图片上传中'+percentComplete + '%');
	        }else {
	        }
	    }

	    function uploadComplete(evt) {
	        var json = eval('(' + evt.target.responseText + ')');
	        console.log(json)
	        if (json.status=='success') {
	            console.log(json.imagePath)
	            $("#headimgurl").val(json.imagePath);
	            alert('照片上传成功')
	            $("#uploadImg").attr('src','<?=base_url()?>'+json.imagePath);
	            $(".tk").show();
	        }else{
	            alert('图片上传失败。')
	        }
	        //隐藏域
	        // $(userfileShowDisc).next().find("img[name='img']").attr("src",json.model.fileName);
	    }

	    function uploadFailed(evt) {
	        alert("上传失败");
	    }

	    function uploadCanceled(evt) {
	        // alert("已经取消上传");
	    }
        </script>
	</body>
</html>
